<template>
 <view class="fixtitle" v-if="userdata">
 	     <view class="" :style="{height:getstateheight()+'px'}"></view>
 		 <view class="titletop"  :style="{height:gettitileheight()+'px'}">
 			   <view style="width:50rpx;" class="iconfont icon-fanhui" @click="nack"></view>
 			   <view class="">{{userdata.name}}</view>
 			   <view style="width:50rpx;" class=""></view>
 		 </view>
 </view>
 <view class="con" v-if="wsdata.length" :style="{top:'-'+jianpanheight}">
	 <scroll-view scroll-y="true"  :scroll-into-view="'id-'+(wsdata.length-1)" >
		  <view class="" :style="{height:scrollheight}"></view>
			 <view class="item" :class="{fan:i.type==1}" :id=" 'id-'+index " v-for="(i,index) in wsdata" :key="index">
				    <image id="img" :src="ip+'/'+i.img" mode="aspectFill"></image>
					<view class="speak">
						   {{i.spkeak}}
					</view>
			 </view>
	 </scroll-view>
 </view>
 <view class="fix">
 	   <view class="iconfont icon-shengyin"></view>
	   <input @confirm="send" type="text" placeholder="发消息~" v-model="senddata" :adjust-position="false"/>
	   <view class="iconfont icon-xiaolian"></view>
	   <view class="send" @click="send">发送</view>
 </view>
</template>

<script setup>
	import { ref,watch,nextTick, reactive} from 'vue'
	import { ip } from '@/utils/getinfo.js';
	import {getstateheight,gettitileheight} from '@/utils/getinfo.js'
	const scrollheight=getstateheight()+gettitileheight()+'px'
	import {onLoad,onReady} from '@dcloudio/uni-app'
	import userstore from "@/store/userlogin.js"
	import ltstore from "@/store/lt.js"
	const useuserstore=userstore()
	const useltstore=ltstore()
	const userdata=ref()
	const jianpanheight=ref(0)
	const senddata=ref()
	const nack=()=>{
		uni.navigateBack()
	}
	const wsdata=ref([])
	const send=async()=>{
		const data={
			   data:JSON.stringify({
			name:useuserstore.userlogin.name,
			img:useuserstore.userlogin.img,
			spkeak:senddata.value,
			type:0,
			id:useuserstore.userlogin.id,
			shou:+userdata.value.id,
			time:new Date().getTime()
		})
		   }
		   useltstore.wss.send(data)
		 await  useltstore.mayspeak(JSON.parse(data.data))
		senddata.value=""
	}
	watch(()=>useltstore.data,()=>{
		const rudata=useltstore.data.find(e=>e.send.id==useuserstore.userlogin.id&&e.shou.id==userdata.value.id)
		wsdata.value=[...rudata.send.speak,...rudata.shou.speak].sort((a,b)=>a.time-b.time)

	},{deep:true})
	onLoad(e=>{
		userdata.value=e   
		const rudata=  useltstore.addxx({
			  send:useuserstore.userlogin.id,
			  shou:+e.id
		  })
		  wsdata.value=useltstore.shortdata(+userdata.value.id)
		  // wsdata.value=useltstore.shortdata(userdata.value.id)
		 // wsdata.value=[...rudata.send.speak,...rudata.shou.speak].sort((a,b)=>a.time-b.time)
	})
	uni.onKeyboardHeightChange(e=>{
		jianpanheight.value=e.height+'px'
	})
</script>

<style lang="scss" scoped>
	.fixtitle{
		position: fixed;
		top: 0;
		z-index: 999;
		width: 100%;
		background-color: #fff;
		.titletop{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 25rpx;
			font-size: 25rpx;
			.iconfont{
				font-size: 25rpx;
			}
		}
	}
	.con{
		position: absolute;
		height:calc(100vh  - 100rpx) ;
		width: 100%;
		background-color: #f7f7f7;
		scroll-view{
			height: 100%;
			width: 100%;
			overflow: hidden;
			box-sizing: border-box;
				width: 100%;
				padding: 20rpx 20rpx;
				.fan{
					flex-direction: row-reverse;
					image{
						margin-right: 0 !important;
						margin-left: 10rpx;
					}
					.speak{
						border-radius:20rpx 0  20rpx  20rpx !important;
					}
				}
				.item{
					margin-top: 40rpx;
					width: 100%;
					height: fit-content;
					display: flex;
					align-items: flex-start;
					#img{
						height: 80rpx;
						width: 80rpx;
						border-radius: 50%;
						margin-right: 10rpx;
					}
					.speak{
						max-width: 60%;
						white-space: wrap;
						background-color: #fff;
						border-radius:0 20rpx 20rpx  20rpx;
						padding:13rpx 17rpx;
						margin-top: 10rpx;
						font-size: 29rpx;
					}
				
			}
		}
	}
	.fix{
		position: fixed;
		bottom: v-bind(jianpanheight);
		width: 100%;
		height: 100rpx;
		background: #fff;
		display: flex;
		align-items: center;
		padding: 0 25rpx;
		.icon-shengyin{
			border: 1rpx solid #7b7b7b;
			padding: 5rpx;
			border-radius: 50%;
		}
		.icon-xiaolian{
			font-size: 45rpx;
		}
		input{
			flex: 1;
			margin: 0 20rpx;
			background-color: #eee;
			height: 60%;
			border-radius: 10rpx;
			font-size:  25rpx;
			padding-left: 20rpx;
		}
		.send{
			height: 60%;
			width: 100rpx;
			border-radius: 10rpx;
			background-color:#f57c00 ;
			margin-left: 20rpx;
			font-size: 25rpx;color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
